<template>
  <div class="map">
    <div class="top-num">
      <span class="text">共享资源总数：<span></span>共</span>
      <span class="img"><b>9</b></span>
      <span class="img"><b>8</b></span>
      <span class="img"><b>9</b></span>
      <span class="img"><b>2</b></span>
      <span class="img"><b>4</b></span>
      <span class="img"><b>8</b></span>
      <span class="text">个</span>
    </div>
    <ChartComp v-if="activeName == '1'" id="mapChart2" :message="option2" style="height: 100%;"></ChartComp>
    <!-- <ChartComp v-else id="mapChart3" :message="option3"></ChartComp> -->
    <!-- <div class="button">
      <span class="img" :class="{ active: activeName == '1' }" @click="goMap('1')">库存实力
      </span>
      <span class="img" :class="{ active: activeName == '2' }" @click="goMap('2')">调拨计划</span>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaMap from "./china.json";

echarts.registerMap("china", chinaMap);
const coord = [{ name: "湖北省", value: [112.2363, 31.1572], num: 98872 }];
const coord2 = [
  { name: "北京市", value: [116.4551, 40.2539], num: 58782 },
  { name: "青海省", value: [95.2402, 35.4199], num: 13824 },
  { name: "河南省", value: [113.0668, 33.8818], num: 15231 },
  { name: "辽宁省", value: [122.0438, 41.0889], num: 23872 },
  { name: "江苏省", value: [118.8586, 32.915], num: 32879 },
  { name: "广西壮族自治区", value: [107.7813, 23.6426], num: 12786 },
];
const coord3 = [
  { name: "北京市", value: [116.4551, 40.2539], num: 8782 },
  { name: "青海省", value: [95.2402, 35.4199], num: 3824 },
  { name: "河南省", value: [113.0668, 33.8818], num: 5231 },
  { name: "辽宁省", value: [122.0438, 41.0889], num: 3872 },
  { name: "江苏省", value: [118.8586, 32.915], num: 2879 },
  { name: "广西壮族自治区", value: [107.7813, 23.6426], num: 2786 },
];

// 武汉、北京、青海、河南、辽宁、江苏、广西
const lines_coord = [
  {
    coords: [
      [112.2363, 31.1572],
      [116.4551, 40.2539],
    ],
  },
  {
    coords: [
      [112.2363, 31.1572],
      [95.2402, 35.4199],
    ],
  },
  {
    coords: [
      [112.2363, 31.1572],
      [113.0668, 33.8818],
    ],
  },
  {
    coords: [
      [112.2363, 31.1572],
      [122.0438, 41.0889],
    ],
  },
  {
    coords: [
      [112.2363, 31.1572],
      [118.8586, 32.915],
    ],
  },
  {
    coords: [
      [112.2363, 31.1572],
      [107.7813, 23.6426],
    ],
  },
];

export default {
  data() {
    return {
      activeName: '1',
      option2: {
        geo: {
          name: "地图",
          // type: 'map',  //地图种类、
          map: "china", //地图类型。
          zlevel: 0,
          show: true,
          layoutCenter: ["50%", "43%"],
          roam: false,
          layoutSize: "90%",
          zoom: 1,

          itemStyle: {
            //地图区域的多边形 图形样式。
            emphasis: {
              //高亮状态下的样试
              label: {
                show: true,
              },
              color: "#fff",
              areaColor: "#003F8B",
            },
            areaColor: "#1B6BCC",
            borderWidth: 2, //设置外层边框
            borderColor: "#65AAFD",
          },
        },
        series: [
          {
            // effectScatter画散点【起点】
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 8,
            symbol: "image://map/mapImg1.png",
            rippleEffect: {
              period: 3,
              brushType: "stroke",
              scale: 3,
            },
            itemStyle: {
              color: "#FFB800",
              opacity: 0.7,
            },
            data: coord2,
            label: {
              show: true,
              color: "#fff",
              position: "left",
              padding: [4, 8],
              //文字背景色
              backgroundColor: new echarts.graphic.LinearGradient(
                1,
                1,
                0,
                0, //(上-下 渐变)
                [
                  { offset: 0, color: "transparent" },
                  { offset: 1, color: "#FF9813" },
                ]
              ),
              formatter(params) {
                return params.data.num;
              },
            },
          },
          {
            // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 18,
            symbol: "image://map/mapImg1.png",
            rippleEffect: {
              period: 40,
              brushType: "stroke",
              scale: 4,
            },
            itemStyle: {
              color: "#FF2C2C",
              opacity: 1,
            },
            data: coord,
            label: {
              show: true,
              color: "#fff",
              position: "left",
              padding: [4, 8],
              // backgroundColor: new, //文字背景色
              backgroundColor: new echarts.graphic.LinearGradient(
                1,
                1,
                0,
                0, //(上-下 渐变)
                [
                  { offset: 0, color: "transparent" },
                  { offset: 1, color: "#FF1313" },
                ]
              ),
              formatter(params) {
                return params.data.num;
              },
            },
          },
        ],
      },
      option3: {
        geo: {
          name: "地图",
          // type: 'map',  //地图种类、
          map: "china", //地图类型。
          zlevel: 0,
          show: true,
          layoutCenter: ["50%", "43%"],
          roam: false,
          layoutSize: "90%",
          zoom: 1,

          itemStyle: {
            //地图区域的多边形 图形样式。
            emphasis: {
              //高亮状态下的样试
              label: {
                show: true,
              },
              color: "#fff",
              areaColor: "#003F8B",
            },
            areaColor: "#1B6BCC",
            borderWidth: 2, //设置外层边框
            borderColor: "#65AAFD",
          },
        },
        series: [
          {
            // effectScatter画散点【起点】
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 8,
            symbol: "image://map/mapImg1.png",
            rippleEffect: {
              period: 3,
              brushType: "stroke",
              scale: 3,
            },
            itemStyle: {
              color: "#FFB800",
              opacity: 0.7,
            },
            data: coord3,
            label: {
              show: true,
              color: "#fff",
              position: "left",
              padding: [4, 8],
              //文字背景色
              backgroundColor: new echarts.graphic.LinearGradient(
                1,
                1,
                0,
                0, //(上-下 渐变)
                [
                  { offset: 0, color: "transparent" },
                  { offset: 1, color: "#FF9813" },
                ]
              ),
              formatter(params) {
                return params.data.num;
              },
            },
          },
          {
            // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            symbolSize: 18,
            symbol: "image://map/mapImg1.png",
            rippleEffect: {
              period: 40,
              brushType: "stroke",
              scale: 4,
            },
            itemStyle: {
              color: "#FF2C2C",
              opacity: 1,
            },
            data: coord,
            label: {
              show: true,
              color: "#fff",
              position: "left",
              padding: [4, 8],
              // backgroundColor: new, //文字背景色
              backgroundColor: new echarts.graphic.LinearGradient(
                1,
                1,
                0,
                0, //(上-下 渐变)
                [
                  { offset: 0, color: "transparent" },
                  { offset: 1, color: "#FF1313" },
                ]
              ),
              formatter(params) {
                return params.data.num;
              },
            },
          },
          {
            // lines画线
            type: "lines",
            coordinateSystem: "geo",
            zlevel: 2,
            symbol: ["none"], //设置飞线的起点终点处的绘制图形
            symbolSize: 12,
            effect: {
              show: true,
              period: 3, //箭头指向速度，值越小速度越快
              trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //飞机图标
              symbolSize: 10, //图标大小
              color: "#00FFFF",
            },
            itemStyle: {
              borderWidth: 1,
              lineStyle: {
                type: "solid",
                shadowBlur: 10,
              },
            },
            lineStyle: {
              //飞线的样式
              width: 2,
              opacity: 1,
              curveness: 0.2,
              color: "#00FFFF",
            },
            data: lines_coord,
          },
        ],
      }
    }
  },
  mounted() {
  },
  methods: {
    goMap(id) {
      this.activeName = id;
    }
  },
}

</script>

<style lang="less" scoped>
  .map {
    position: relative;
    width: 100%;
    height: 60%;
  }
  .top-num {
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-right: 6px;
    }
    .text {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #cce0f7;
    }
    .img {
      display: inline-block;
      width: 50px;
      height: 56px;
      background: url('~@/assets/img/数字背景.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      b {
        font-size: 24px;
        font-family: DOUYU-Font, DOUYU;
        font-weight: bold;
        color: #ffd93d;
        line-height: 56px;
        background: linear-gradient(180deg, #ffee70 0%, #ffd93d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
  .button {
    position: absolute;
    left: 35%;
    bottom: 50px;
    .img {
      display: inline-block;
      font-size: 24px;
      font-family: YouSheBiaoTiHei;
      color: #8abcf8;
      margin-right: 40px;
      &.active {
        font-size: 24px;
        font-family: YouSheBiaoTiHei;
        color: #ffffff;
        background: url('~@/assets/img/按钮选中.png') no-repeat;
        background-size: 100% 100%;
        padding: 8px 30px;
      }
    }
  }
  .mapNum {
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    position: absolute;
    padding: 4px 14px;
    background: linear-gradient(270deg, rgba(19, 126, 255, 0.3) 0%, #13e5ff 100%);
    &.red {
      background: linear-gradient(270deg, rgba(255, 19, 19, 0) 0%, #ff1313 100%);
    }
  }
</style>
